<template>
  <frame-view class="index" nav-bar-bg-color="#fff">
<!--    <div class="section" :style="{'padding-bottom': `calc(120rpx + ${bottom})`,}">-->
      <!-- 表单 -->
      <div class="uni-white-bg uni-px-9 form" style="font-size: 26px !important;">
        <van-field v-model="form.name"
                   name="姓名" label-width="6em"  label="姓名" placeholder="姓名" clearable>
        </van-field>
        <van-field v-model="form.mobile" name="手机号码" label-width="6em"  label="手机号码" placeholder="请输入手机号码" clearable>
        </van-field>
        <van-field readonly v-model="form.loc" name="所在地区" label-width="6em"  label="所在地区" placeholder="请选择省市区" clearable>
          <template #right-icon>
            <van-icon name="arrow" />
          </template>
        </van-field>
        <van-field type="textarea" auto-height v-model="form.address" name="详细地址" label-width="6em"  label="详细地址" placeholder="请输入详细地址" clearable>
        </van-field>


      </div>

      <div class="uni-white-bg uni-mt-6 uni-py-8 uni-px-9 flex-y-c flex-x-b" style="background-color: #fff;margin-top: 24px;padding: 36px">
        <div class="flex flex-d-col flex-x-b">
          <div class="f-13 t-gray">设置默认地址</div>
          <div class="f-12 t-a8" style="margin-top: 24px">提醒：每次下单会默认推荐使用该地址</div>
        </div>
        <van-switch inactive-color="#f2f2f2" v-model="form.checked" size="24px" />
        <!--			<u-switch v-model="flag" :size="30"></u-switch>-->
      </div>


      <!-- 操作栏 -->
<!--      <div class="foot uni-white-bg flex-y-c" :style="{'padding-bottom':bottom}">-->
<!--        <div class="btn del" hover-class="hover" @click="del">-->
<!--          <text class="t-mid" style="color:  #4569F8;margin: auto;" @click="showEdit = true">删除</text>-->
<!--        </div>-->
<!--        <div class="btn" hover-class="hover">-->
<!--          <text class="t-mid" style="color: #fff;margin: auto;">保存并使用</text>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

    <div style="display: flex;justify-content: center;background-color: #fff;position:fixed;bottom: 0">

      <van-button plain @click="showEdit = true" round type="info" style="width: 328px;height: 80px;margin: 16px" >删除</van-button>
      <van-button  round type="info" style="width: 328px;height: 80px;margin: 16px">保存并使用</van-button>
    </div>
    <u-confirm :show-title="false" position="center" :show="showEdit" @close="closeEdit" @confirm="confirmEdit">
      <div style="font-weight: bold;font-size: 32px;color: #262626;;width: 592px;text-align: center;padding: 72px 0  48px ;">
        确认删除这个地址吗？
      </div>

    </u-confirm>
  </frame-view>
</template>

<script>
import UPopup from '@/components/u-popup.vue';
import UConfirm from '@/components/u-confirm.vue';
import { Toast } from 'vant';

export default {
  components: { UConfirm, UPopup },
  data() {
    return {
      bottom: 0,
      delshow: false,
      flag: false,
      form: {
        //联系人
        name: '王小霞',
        mobile: '1313131231',
        loc: '北京市大兴区亦庄经济开发区',
        address: '科创十一街18号院京东大厦B座7层科创科创十一街',
        checked: false
      },
      showEdit: false
    };
  },
  methods: {
    jump(url) {
      uni.$emit('jump', url);
    },
    del() {
      this.delshow = true;

    },
    closeEdit() {
      this.showEdit = false;
    },
    confirmEdit() {
      this.delshow = false;
      this.$router.back();
      //触发上一个页面的aaa方法
      // this.$emit('toast');

      setTimeout(() => {
        Toast({
          message: '删除成功',
          icon:require('../index/image/success.png'),
        });
      }, 1000);
      // Toast({
      //   message: '删除成功',
      //   icon:require('../index/image/success.png'),
      // });
    },
  }
};
</script>

<style scoped lang="scss">
.section {
  background-color: #f7f7f7;
}

.foot {
  border-top: 1rpx solid #F5F5F5;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 112rpx;
}

.btn {
  width: 328rpx;
  height: 80rpx;
  border-radius: 40rpx;
  background-color: #4569F8;
  margin: auto;
  display: flex;

  &.del {
    background-color: #fff;
    border: 1px solid #4569F8;
  }
}


.delshowContent {
  width: 582rpx;
  background-color: #ffffff;
  border-radius: 40rpx;

  .title {
    font-size: 38rpx;
    font-weight: 600;
    text-align: center;
    margin: 50rpx 0;
  }
}

.twoBtn {
  margin-top: 80rpx;
  margin-bottom: 30rpx;
  display: flex;
  justify-content: space-around;
  padding: 0 40rpx;
  box-sizing: border-box;
}
:deep(.frame-view-content) {
  padding: 0 !important;
}
</style>
